<template>
    <div class="dialoglistDiv">
        <div class="dialogsearchDiv">
            <el-select v-model="obj.req.priority" placeholder="优先级" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.priorityList" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-select v-model="obj.req.state" placeholder="状态" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.timestateAry" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-input clearable placeholder="匹配名称" v-model="obj.req.key" class="search_key" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight">
                <span class="btn add" @click="add">添加应急演练</span>
            </div>
        </div>
        <div class="table_box">
            <div class="table_" id="tb">
                <ul class="head">
                    <li class="mw130 wcen">编号</li>
                    <li class="mw200">主题</li>
                    <li class="mw200 wcen">开始时间</li>
                    <li class="mw200 wcen">截止时间</li>
                    <li class="wcen">状态</li>
                    <li class="wcen">优先级</li>
                    <li class="wcen">总人数</li>
                    <li class="wcen">待确认数</li>
                    <li class="wcen">参加人数</li>
                    <li class="wcen">拒绝人数</li>
                    <li class="mw250 wcen">操作</li>
                </ul>
                <div class="body">
                    <ul v-for="x in obj.ary" :key="x">
                        <li class="mw130 wcen">{{x.code}}</li>
                        <li class="mw200">
                            <el-tooltip class="box-item" effect="dark" :content="x.title" placement="top-start" :disabled="x.title.length<10">
                                <div class="lineOne pointer">{{x.title}}</div>
                            </el-tooltip>
                        </li>
                        <li class="mw200 wcen">{{x.starttime}}</li>
                        <li class="mw200 wcen">{{x.endtime}}</li>
                        <li class="wcen">
                            <div :class="[fix(x).label]">{{fix(x).text||''}}</div>
                        </li>
                        <li class="wcen">
                            <div :class="[proxy.$utils.find(globalData.priorityList, x.priority, 'label')]">{{proxy.$utils.find(globalData.priorityList, x.priority)}}</div>
                        </li>
                        <li class="base-color pointer wcen"><u @click="sign(x,'','总人数')">{{x.cou}}</u></li>
                        <li class="base-color pointer wcen"><u @click="sign(x,'0','待确认人数')">{{x.cou0}}</u></li>
                        <li class="base-color pointer wcen"><u @click="sign(x,'1','参加人数')">{{x.cou1}}</u></li>
                        <li class="base-color pointer wcen"><u @click="sign(x,'2','拒绝人数')">{{x.cou2}}</u></li>
                        <li class="mw250 wcen">
                            <el-button class="edit_btn" type="success" @click="edit(x)">修改</el-button>
                            <el-button class="edit_btn mr10" type="success" @click="adduser(x)">添加</el-button>
                            <DelConfirm class="" @yesClick="del(x)" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <Pager :value="obj.req" :init="init" />

        <el-dialog v-model="obj.drawer.design" :title="obj.drawer.designTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <router-view @close="obj.drawer.design = false" @init="init" />
        </el-dialog>
        <el-dialog v-model="obj.drawer.sign" :title="obj.drawer.signTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Sign :drill_id="obj.drawer.drill_id" :coustate="obj.drawer.coustate" @close="obj.drawer.sign = false" @init="init" />
        </el-dialog>
        <el-dialog v-model="obj.drawer.adduser" :title="obj.drawer.signTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Adduser :drill_id="obj.drawer.drill_id" :coustate="obj.drawer.coustate" @close="obj.drawer.adduser = false" @init="init" />
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    import Sign from './sign.vue'
    import Adduser from './adduser.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            design: false,
            designTitle: "",
            sign: false,
            signTitle: "",
            coustate: "",
            adduser: false
        },
        ary: [],
        req: {
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
            priority:"",
            state: ''
        },
        cleaning_sign0: 0,
        cleaning_sign: 0,
    });
    let init = () => {
        proxy.$ajax({
            url: '/drill/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    let fix = computed(() => {
        return (x) => {
            if(x.complete == 1) return {text:"完成",color:'success-color',label:'label-btn-success'}
            let start = new Date(x.starttime), end = new Date(x.endtime), now = new Date()
            if (start > now) return {text:"尚未开始",color:'gray-color',label:'label-btn-warning'}
            if (end < now) return {text:"已结束",color:'gray-color',label:'label-btn-info'}
            return {text:"进行中",color:'base-color',label:'label-btn-primary'}
        }
    })

    let editId = ref(0)
    provide("id", editId); //不能加.value
    let add = () => {
        obj.drawer.design = true
        obj.drawer.designTitle = "添加应急演练"
        editId.value = 0;
    }
    let edit = x => {
        obj.drawer.design = true
        obj.drawer.designTitle = "修改应急演练"
        editId.value = x.drill_id;
    }
    let adduser = x => {
        obj.drawer.adduser = true
        obj.drawer.designTitle = "添加用户"
        editId.value = x.drill_id;
    }
    

    let sign = (x,state,text) => {
        obj.drawer.sign = true
        obj.drawer.signTitle = `${x.title}：参与情况列表`
        obj.drawer.coustate = state;
        obj.drawer.drill_id = x.drill_id;
    }

    let del = x => {
        proxy.$ajax({
            url: '/drill/delete',
            data: { drill_id: x.drill_id },
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                proxy.elMessageMixin("删除成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .search_select { width:100px!important; }
    .search_key { width:160px!important; }
    #tb ul li.li1 { width: 120px; }
    #tb ul li.li2 { width: 75px; }
    #tb ul li.li5 { width: 75px; }
    #tb ul li.li6 { width: 55px; }
    #tb ul li.li7 { width: 150px; }
</style>